<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./CSS/css.css">
  <title>Online Shopping</title>
</head>
<body>
  <header>
    <div class="top-bar">
      <span class="time">20:30</span>
      <span class="signal">信号图标</span>
      <input type="text" placeholder="搜索">
    </div>
    <div class="banner">
      <img src="bag.jpg" alt="女神新包">
      <h1>女神新包</h1>
      <p>新品限时八折</p>
      <div class="category-icons">
        <img src="icon1.jpg" alt="女包">
        <img src="icon2.jpg" alt="女鞋">
        <img src="icon3.jpg" alt="女装">
        <!-- 其他图标 -->
      </div>
    </div>
  </header>
  <main>
    <section class="promotion">
      <div class="promo-box">
        <img src="promo1.jpg" alt="年终大促">
        <h2>年终大促</h2>
        <p>限时买就返</p>
        <div class="product-box">
          <div class="product">
            <img src="product1.jpg" alt="商品1">
            <p class="price">¥117</p>
          </div>
          <div class="product">
            <img src="product2.jpg" alt="商品2">
            <p class="price">¥109</p>
          </div>
          <div class="product">
            <img src="product3.jpg" alt="商品3">
            <p class="price">¥288</p>
          </div>
        </div>
      </div>
      <div class="promo-box">
        <img src="promo2.jpg" alt="爆款推荐">
        <h2>爆款推荐</h2>
        <p>最受欢迎</p>
        <div class="product-box">
          <div class="product">
            <img src="product4.jpg" alt="商品4">
            <p class="price">¥423</p>
          </div>
          <div class="product">
            <img src="product5.jpg" alt="商品5">
            <p class="price">¥119</p>
          </div>
          <!-- 其他商品 -->
        </div>
      </div>
    </section>
    <section class="new-arrivals">
      <h2>新鲜好物</h2>
      <div class="product-box">
        <div class="product">
          <img src="product6.jpg" alt="商品6">
          <p class="price">¥289</p>
        </div>
        <div class="product">
          <img src="product7.jpg" alt="商品7">
          <p class="price">¥89</p>
        </div>
        <!-- 其他商品 -->
      </div>
    </section>
  </main>
  <footer>
    <div class="footer-links">
      <a href="#">首页</a>
      <a href="#">分类</a>
      <a href="#">购物袋</a>
      <a href="#">我的</a>
    </div>
  </footer>
</body>
</html>